<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="username"
        @keyup.enter="search"
      />
      <button @click="search">Search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Search',
  data() {
    return {
      username: '',
    }
  },
  methods: {
    async search() {
      const username = this.username.trim()
      if (!username) {
        alert('请输入用户名')
        return
      }
      this.$Bus.$emit('setLoading')
      const res = await axios({
        method: 'GET',
        url: 'https://api.github.com/search/users',
        params: {
          q: username,
        },
      })
      const users = res.data.items.map((user) => {
        return {
          id: user.id,
          login: user.login,
          html_url: user.html_url,
          avatar_url: user.avatar_url,
        }
      })
      this.$Bus.$emit('setLoading')
      this.$Bus.$emit('getUsers', users)
    },
  },
}
</script>

<style></style>
